<template>
 <!--引用组件-->
    <!--两列布局-->
    <div class="wrapper tc-detail">
        <div class="fl left-list">
            <div class="tc-detail">
    <!-- 标题区 -->
    <div class="detail-tit">
        <div class="detail-author">
            <a href="javascript:;">{{spitItem.nickname}}</a> 发布
        </div>
        <div class="detail-content">
            {{spitItem.content}}
        </div>
        <div class="detail-tool">
            <ul>
                <li><span class="star"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{spitItem.thumbup}}</span></li>
                <li><a href="#" data-toggle="modal" data-target="#shareModal"><i class="fa fa-share-alt" aria-hidden="true"></i>{{spitItem.share}}</a></li>
                <li><a @click="dialogFormVisible=true"  data-toggle="modal" data-target="#remarkModal"><i class="fa fa-commenting" aria-hidden="true" ></i> {{spitItem.comment}}</a></li>
            </ul>
        </div>
    </div>
    <!-- 弹出框分享 -->
    <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">分享到</h4>
                    </div>
                    <div class="modal-body" style="overflow:hidden">
                        <div class="jiathis_style_32x32" >
                            <a class="jiathis_button_qzone"></a>
                            <a class="jiathis_button_tsina"></a>
                            <a class="jiathis_button_weixin"></a>
                            <a class="jiathis_button_cqq"></a>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    <!-- 弹出框评论 -->
    <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">发表评论</h4>
                    </div>
                    <div class="modal-body">
                        <div class="comment">
                            <span class="who"><img src="~/assets/img/asset-photo.png"/>匿名评论</span>: 今天入职腾讯，产品岗，普通非985211大学，上家是不到五十人创业小公司！16年毕业！找内推腾讯给的面试机会，五轮面试！可能是我把运气攒一起了！
                        </div>
                        <div class="form">
                            <textarea class="form-control" rows="5" placeholder="匿名评论"></textarea> 
                            <div class="remark">
                                <button class="sui-btn btn-info">发表</button>
                            </div>                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- 评论区 -->
    <div class="comment-area">
        <div class="comment-tit">
            <span>评论</span>
        </div>
        <ul class="comment-list">
            <li v-for="(item,index) in items" :key="index">
                <div class="item-photo">
                    <img src="~/assets/img/widget-widget-photo.png" alt="" />
                </div>
                <div class="item-content">
                    <p class="author"><a href="javascript:;">{{item.nickname}}</a> 发布</p>
                    <p class="content">{{item.content}}</p>
                </div>
                <div class="item-thumb">
                    <div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{item.thumbup}}</div>
                </div>
            </li>
        </ul>
    </div>
</div>
        </div>
        <div class="fl right-tag">
            <div class="block-btn">
                <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p>
                <a class="sui-btn btn-block btn-share" href="~/assets/spit-submit.html" target="_blank">发吐槽</a>
            </div>
        </div>
        <div class="clearfix"></div>

        <el-dialog title="发布评论" :visible.sync="dialogFormVisible">
            <div class="quill-editor" 
                :content="content"
                @change="onEditorChange($event)"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                v-quill:myQuillEditor="editorOption">
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import "~/assets/css/page-sj-spit-detail.css"
import spitApi from "~/api/spit"
import axios from "axios"
export default {
    asyncData(context) {
        let id = context.params.id;
        //console.log(id)
        return axios.all([spitApi.findById(id), spitApi.commentlist(id)])
            .then(axios.spread(function (res1, res2) {
            //console.log(res1.data)
            //console.log(res2.data)
            return {
                spitItem:res1.data.data,
                items:res2.data.data,
                id:id
            }
        }));
    },
    data () {
        return {
            dialogFormVisible:false,
            content: '<p>I am Example</p>',
            editorOption: {}
        }
    },
    methods: {
        save() {
            //context  ，  id
            spitApi.save({content:this.content,parentId:this.id}).then(res=> {
                //alert(res.data.message)
                if(res.data.flag) {
                    this.dialogFormVisible = false;
                    //当前页面刷新
                }
            })
        },
        onEditorBlur(editor) {
            console.log('editor blur!', editor)
        },
        onEditorFocus(editor) {
            console.log('editor focus!', editor)
        },
        onEditorReady(editor) {
            console.log('editor ready!', editor)
        },
        onEditorChange({ editor, html, text }) {
            console.log('editor change!', editor, html, text)
            this.content = html
        }
    }
}
</script>

<style>
    .quill-editor {
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }
</style>
